@use "sass:math" as math;
@use "../../assets/scss/mixins/base" as *;

$light: #f1f1f1;
$dark: #d5d5d5;

$blue-light: #4dc2f3;
$blue-dark: #3276a4;

* {
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;

  background-color: $light;
  background-image: linear-gradient(
      45deg,
      $dark 25%,
      transparent 25%,
      transparent 75%,
      $dark 75%
    ),
    linear-gradient(
      45deg,
      $dark 25%,
      transparent 25%,
      transparent 75%,
      $dark 75%
    );
  background-size: 4px 2px;
  background-position: 0 0, 2px 1px;
  box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
  .middle {
    display: table-cell;
    vertical-align: middle;
    .inner {
      position: relative;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      border-radius: 50%;
      background-image: linear-gradient($light, $dark);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), inset 0 1px white;
      .btn1 {
        position: relative;
        top: 10px;
        left: 10px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background-image: linear-gradient($dark, $light);
        box-shadow: inset 0 -1px white;
        .btn-pulse {
          position: absolute;
          top: 10px;
          left: 10px;
          height: 160px;
          width: 160px;
          border-radius: 50%;
          background-image: linear-gradient($blue-light, $blue-dark);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
          overflow: hidden;
          .pulse {
            @include abs-tl(50%, 50%);
            list-style: none;
            animation: rot 0.8s linear infinite alternate;
            li {
              @include abs-tl(-2.5px, -5px);
              display: block;
              @include rect(10px, 3px, #adffff, 50%);
              box-shadow: 0 0 5px 3px #8df2f3;

              @for $i from 1 through 33 {
                $mod: $i % 8;
                &:nth-child(#{$i}) {
                  $angle: calc($i * 11.25deg + 11.25deg);
                  transform: rotateZ($angle) translateY(-75px);
                  opacity: calc($mod / 8);
                }
              }
            }
          }
          .btn3 {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background-image: linear-gradient($light, $dark);
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), inset 0 1px white;
            .btn4 {
              @include abs-tl(10px, 10px);
              @include circle(120px, linear-gradient($dark, $light));
              line-height: 120px;
              text-align: center;
              span {
                font-family: Arial, Helvetica, sans-serif;
                font-weight: 500;
                color: #acacac;
                font-size: 35px;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes rot {
  0%,
  12.5% {
    transform: rotateZ(0deg);
  }
  12.6%,
  25% {
    transform: rotateZ(11.25deg);
  }
  25.1%,
  37.5% {
    transform: rotateZ(22.5deg);
  }
  37.6%,
  50% {
    transform: rotateZ(33.75deg);
  }
  50.1%,
  62.5% {
    transform: rotateZ(45deg);
  }
  62.6%,
  75% {
    transform: rotateZ(56.25deg);
  }
  75.1%,
  87.5% {
    transform: rotateZ(67.5deg);
  }
  87.6% {
    text-replace: rotateZ(78.75deg);
  }
  87.7%,
  100% {
    transform: rotateZ(90deg);
  }
}
